import { Outlet, Link, useLocation } from 'react-router-dom';

export default function AdminLayout() {
  const loc = useLocation();
  const tabs = [
    { key: '/admin', label: '首页', icon: '🏠' },
    { key: '/admin/review', label: '审核', icon: '📄' },
    { key: '/admin/add-student', label: '添加用户', icon: '➕' },
    { key: '/admin/profile', label: '我的', icon: '👤' },
  ];
  
  const isActive = (path: string) => {
    if (path === '/admin') {
      return loc.pathname === '/admin';
    }
    return loc.pathname.startsWith(path);
  };

  return (
    <div className="min-h-screen bg-slate-50">
      {/* 顶部导航栏 */}
      <div className="h-14 bg-white flex items-center justify-between px-4 shadow-sm">
        <div className="flex items-center gap-2">
          <div className="w-1 h-6 bg-blue-600"></div>
          <div className="font-medium text-lg">学工系统管理后台</div>
        </div>
        <div className="flex items-center gap-2 text-slate-700">
          <div className="w-5 h-5 rounded-full bg-slate-200 flex items-center justify-center text-xs">👤</div>
          <span>管理员</span>
        </div>
      </div>
      
      {/* 主内容区 */}
      <div className="pb-20">
        <Outlet />
      </div>
      
      {/* 底部导航栏 */}
      <div className="fixed left-0 right-0 bottom-0 border-t bg-white z-10">
        <div className="grid grid-cols-4">
          {tabs.map(t => (
            <Link
              key={t.key}
              to={t.key}
              className={`py-3 flex flex-col items-center justify-center ${
                isActive(t.key) ? 'text-blue-600' : 'text-slate-500'
              }`}
            >
              <div className="text-xl mb-1">{t.icon}</div>
              <div className="text-xs">{t.label}</div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}


